<template>
  <div class="main">
    <h1>{{ nodeData.nodeName }}</h1>
    <button id="deleteNode" v-if="author" @click="deleteNode"><span></span>delete</button>
    <AuthorBar :nodeData="nodeData" />
    <NodeContent :nodeContent="nodeContent" />
  </div>
</template>

<script>
import NodeContent from "@/components/NodeValue/NodeContent.vue";
import AuthorBar from "@/components/NodeValue/AuthorBar.vue";
import { getCookie } from "@/tool/ToolCookie";
export default {
  data() {
    return {
      nodeData: {
        nodeId: this.$route.query.id,
        nodeName: this.$route.query.nodename,
        nodeClass: this.$route.query.className,
        nodeLanguage: this.$route.query.language,
        author: this.$route.query.username,
        nodeDay: this.$route.query.time,
        popularity: this.$route.query.popularity,
        text: this.$route.query.description,
        userId: this.$route.query.userId,
      },
      // 请求服务器获取到的笔记内容
      nodeContent: "",
    };
  },
  computed: {
    // 判断是否是作者查看该笔记
    author() {
      return this.$route.query.userId == getCookie("userId");
    },
  },
  methods: {
    // 删除该笔记事件
    deleteNode() {
      if (confirm("确定要删除该篇笔记吗？")) {
        // 发送请求删除笔记
        this.$axios({
          method: "post",
          url: "http://localhost:8181/node/deleteMyNode/" + this.$route.query.id,
        }).then(
          (res) => {
            if(res.data) {
              alert("删除成功！")
              this.$router.replace({
                path:'/main'
              })
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }
    },
  },
  components: {
    AuthorBar,
    NodeContent,
  },
  // 组件挂载前，请求后端笔记内容
  mounted() {
    // 请求后端的笔记内容
    this.$axios({
      method: "post",
      url: "http://localhost:8181/node/getContent/" + this.nodeData.userId,
      data: {
        className: this.nodeData.nodeClass,
        language: this.nodeData.nodeLanguage,
        nodename: this.nodeData.nodeName,
        popularity: this.nodeData.popularity,
        id: this.nodeData.nodeId,
      },
    }).then(
      (res) => {
        this.nodeContent = res.data;
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style scoped>
.main {
  margin-top: 2%;
  width: 1000px;
  padding-bottom: 30px;
  height: auto;
}
h1 {
  color: #fff;
  margin: 20px 0 20px 20px;
  display: block;
}
#deleteNode {
  position: absolute;
  top: 30px;
  right: 30px;
  background: none;
  height: 30px;
  width: 100px;
  border: #55556d solid 0.5px;
  color: #fff;
  border-radius: 20px;
  font-size: medium;
  font-weight: 700;
  cursor: pointer;
}
#deleteNode:hover {
  background-color: rgb(250, 80, 40);
  border-color: rgb(250, 80, 40);
}
span {
  font-family: 'icomoon';
  margin-right: 5px;
}
</style>